<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0; padding: 0; border: none;}
			ul, li {list-style: none;}
			#box {
				width: 600px;
				height: 300px;
				margin: 100px auto;
				overflow: hidden;
				border: 10px solid blue;
				position: relative;
			}
			#list1 {
				width: 3100px;
				height: 300px;
				position: absolute;
				left: 0;
				top: 0;
			}
			#list1 li, #list1 img {
				width: 600px;
				height: 300px;
			}
			#list1 li {
				float: left;
			}
			#list2  {
				width: 150px;
				height: 20px;
				position: absolute;
				right: 30px;
				bottom: 30px;
			}
			#list2 li {
				width: 18px;
				height: 18px;
				border: 1px solid black;
				background: yellow;
				text-align: center;
				line-height: 18px;
				margin-left: 5px;
				float: left;
				cursor: pointer;
			}
			
			#list2 li.active {
				background: green;
			}
			
			#prev, #next {
				width: 50px;
				height: 22px;
				background: orange;
				position: absolute;
				top: 45%;
				cursor: pointer;
			} 
			#prev {
				left: 10px;
			}
			#next {
				right: 10px;
			}
			
		</style>
		<script src="js/jquery-1.12.3.js"></script>
		<script>
			$(function(){
				
				//jq轮播图
				var list1 = $("#list1");
				var list2 = $("#list2");
				var li1 = $("#list1 li");
				var li2 = $("#list2 li");
				
				//复制第一张图到最后
				li1.first().clone(true).appendTo(list1);
				
				//
				var size = $("#list1 li").size();
				list1.width(600*size);
				
				//开启定时器
				var i = 0;
				var timer = setInterval(function(){
					i++;
					move();
				}, 2000);
				
				function move(){
					
					if (i < 0) {
						list1.css("left", -600*(size-1));
						i = size-2;
					}
					
					if (i >= size){
						list1.css("left", 0);
						i = 1;
					}
					
					list1.stop().animate({left:-i*600}, 500);
					
					li2.eq(i).addClass("active").siblings().removeClass("active");
					if (i == size-1) {
						li2.eq(0).addClass("active").siblings().removeClass("active");
					}
				}
				
				//上一页
				$("#prev").click(function(){
					i--;
					move();
				})
				
				//下一页
				$("#next").click(function(){
					i++;
					move();
				})
				
				li2.mouseenter(function(){
					i = $(this).index();
					move();
				})
				
				$("#box").hover(function(){
					clearInterval(timer);
				}, 
				function(){
					timer = setInterval(function(){
						i++;
						move();
					}, 2000);
				})
				
				
			})
		</script>
	</head>
	<body>
		<div id="box">
			<ul id="list1">
				<li><img src="images/b1.jpg" /></li>
				<li><img src="images/b2.jpg" /></li>
				<li><img src="images/b3.jpg" /></li>
				<li><img src="images/b4.jpg" /></li>
			</ul>
			<ul id="list2">
				<li class="active">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
			<div id="prev">上一页</div>
			<div id="next">下一页</div>
		</div>
	</body>
</html>
